<template>
    <!--
      Vue的作者参考了MVVM模型，设计出了Vue
      MVVM模型
      1. M：模型(Model) ：data中的数据
      2. V：视图(View) ：模板代码
      3. VM：视图模型(ViewModel)：Vue实例

      Vue中有2种数据绑定的方式：
      1.单向绑定(v-bind)：数据只能从data流向页面。
      2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
        备注：
        1.双向绑定一般都应用在表单类元素上（如：input、select等）
        2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
     -->
    <div class="person">
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        姓：<input type="text" v-model="firstName"/><br/>
        名：<input type="text" v-model="lastName"/><br/>
        全名：<span>{{fullName()}}</span> <br/><br/>

        <input type="checkbox" v-model="languages" value="1"/>Java<br/>
        <input type="checkbox" v-model="languages" value="2"/>PHP<br/>
        <input type="checkbox" v-model="languages" value="3"/>Android<br/>
        <h1>
            你选择了：{{languages.join(',')}}
        </h1>
    </div>
</template>


<script setup name="Person">
    import {reactive,ref} from "vue";
    let name = ref('zhangsan')
    let firstName = ref('张')
    let lastName = ref('三')
    let languages = ref([])

    function fullName() {
        console.log('fullName()');
        return firstName.value + '-' + lastName.value;
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>